<template>
  <div id="phoneCall">
    <img src="https://image.10street.cn/image/f9/c6/f9c634163f29ddc252cf33f71e475de7.png" alt="" class="titleimg">
    <ul>
      <li v-for="item in phoneCall_data.itemData" :key ='item.commonId' v-on:click='todetail(item.commonId)'>
        <img :src="item.imageUrl" alt="">
        <p class="name"><img src="https://api.10street.cn/wap/images/product/vipPrice0.png" alt="">{{ item.goodsName.slice(0,12) }}</p>
        <p class="price">￥{{ item.goodsPrice }}</p>
        <p class="vip_price"> 会员价: <span>￥{{ item.vipPrice }}</span></p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['phoneCall_data'],
  methods: {
    todetail(index){
      this.$emit('commonId',index)
    }
  },
}
</script>
<style lang='stylus' scoped>
#phoneCall
  margin-bottom 0.16rem
  .titleimg
    width 100%
  ul
    display flex
    flex-wrap wrap
    overflow scroll
    background rgb(239, 239, 240)
    li
      width calc(50% - 0.1125rem)
      background #fff
      padding-left 0.0625rem
      padding-bottom 0.13rem
      margin-top 0.11rem
      padding-top 0.05rem
      border-radius 0.05rem
      &:nth-of-type(2n-1)
        margin-left 0.075rem
        margin-right 0.0375rem
      &:nth-of-type(2n)
        margin-right 0.075rem
        margin-left 0.0375rem
      p
        padding-left 0.05rem
        margin-right 0.05rem
      img
        width 1.63rem
        height 1.6rem
      .name
        font-size 0.12rem
        margin-top 0.11rem
        margin-bottom 0.04rem
        overflow hidden
        white-space nowrap
        img 
          width 0.15rem
          height 0.13rem
          margin-right 0.05rem
      .price
        font-size 0.12rem
        margin-bottom  0.04rem
      .vip_price
        font-size 0.12rem
        span
          color red

</style>